{include file="Public:meta"}
<link href="__STATIC__/../Admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />

<title>编辑banner</title>
</head>
<body>
<article class="page-container">
	<form action="" method="post" class="form form-horizontal" id="form-banner-add" enctype="multipart/form-data">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>标题：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="{$data.title}" placeholder="" id="title" name="title">
			</div>
		</div>
		<div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>图片：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <button class="btn btn-primary radius" type="button"  onclick="$('#fileUpload').click()">选择图片</button>
                <span style="color:#c8a0a0;">建议上传图片尺寸 700*315</span>
                <div  id="checkshow" style="width: 350px;height: 150px;padding: 5px;border: 1px solid #e6e6e6;border-radius: 10px;">
                    {if $data.pic}
                        <img src="{$data.pic}" alt=""  id="ImgPreview" style="width: 100%;height: 100%"/>
                    {else}
                        <img src="" alt=""  id="ImgPreview" style="display: none;width: 100%;height: 100%"/>
                    {/if}
                </div>
                <input type="file" class="input-text" id="fileUpload" name="pic" style="display: none">
            </div>
        </div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>url地址：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="{$data.url}" placeholder="" id="url" name="url">
			</div>
		</div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">
                <span class="c-red"></span>
                是否开启：</label>
            <div class="formControls col-xs-6 col-sm-6 skin-minimal">
                <div class="check-box">
                    <input type="radio" id="open" name="is_show" value="1" {if $data.is_show == 1}checked{/if} /> <label for="open">启用</label>
                </div>
                <div class="check-box">
                    <input type="radio" id="close" name="is_show" value="0" {if $data.is_show == 0}checked{/if} /> <label for="close">关闭</label>
                </div>
            </div>
        </div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input type="hidden" name="id" value="{$data.id}">
				<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</form>
</article>


<!--_footer 作为公共模版分离出去-->
{include file="Public:footer"}
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/../Admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/../Admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="__STATIC__/../Admin/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="__STATIC__/../Admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	$("#form-banner-add").validate({
		rules:{
			title:{
				required:true,
			},
			fileUpload:{
				required:true,
			},
			
		}
	});

	// 图片上传框
	$("#fileUpload").change(function() {
        $('#ImgPreview').show();
        var $file = $(this);
        var fileObj = $file[0];
        var windowURL = window.URL || window.webkitURL;
        var dataURL;
        var $img = $("#ImgPreview");
        if(fileObj && fileObj.files && fileObj.files[0]){
            dataURL = windowURL.createObjectURL(fileObj.files[0]);
            $img.attr('src',dataURL);
        }else{
            dataURL = $file.val();
            var imgObj = document.getElementById("ImgPreview");
            // 两个坑 : 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
            //        2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

        }
    });


});
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>